<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
    String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SQL-Builder</title>
<link rel="shortcut icon" href="<%=path %>/css/images/ico.ico"
	type="image/x-icon" />
<link href="<%=path%>/bootstrap-3.3.5-dist/css/bootstrap.min.css"
	rel="stylesheet" type="text/css" />
<!-- SQL建立样式 -->
<link href="<%=path%>/css/queryBuilder.css" rel="stylesheet"
	type="text/css" />
<!-- 公共的css样式 -->
<link href="<%=path%>/css/base.css" rel="stylesheet" type="text/css" />

<!-- 警告框样式 -->
<link href="<%=path%>/css/sweetalert.css" rel="stylesheet"
	type="text/css" />
<!-- 警告框js -->
<script src="<%=path%>/js/sweetalert.min.js"></script>

<script type="text/javascript" src="<%=path%>/js/jquery.min.js"></script>
<script type="text/javascript"
	src="<%=path%>/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="<%=path%>/js/jquery.validate.min.js"></script>
</head>

<body>
	<ul class="nav nav-tabs" id="query_ul">
		<li role="presentation" id="query_template"><a
			href="<%=path %>/jumpDemo">模板管理</a></li>
		<li role="presentation" id="builder_query" class="active"><a
			href="<%=path %>/builderQuery">查询结构管理</a></li>
		<li role="presentation" id="query_result"><a
			href="<%=path %>/queryResult">查询结果管理</a></li>
	</ul>
	<div class="dis_pro">
		<input type="hidden" id="path" value="<%=path%>" /> <input
			type="hidden" id="jsPath" value="www.niubai.net.cn" /> <input
			type="hidden" id="option" /> <input type="hidden" id="opRow" />
	</div>

	<div class="mainDiv">
		<h2>QueryBuilder静态页面</h2>
		<div class="builder_main" align="center">
			<div class="l_op">
				<div class="btn-group btn-group-xs group_left" data-toggle="buttons">
					<label class="btn btn-primary active"> <input type="radio"
						name="options" autocomplete="off" value="and" checked>并且 </label>
					<label class="btn btn-primary"> <input type="radio"
						name="options" value="or" autocomplete="off"> 或者 </label>
				</div>
				<div class="btn-group btn-group-xs group_right" role="group"
					aria-label="...">
					<button type="button" class="btn btn-primary">
						<span class="glyphicon glyphicon-align-justify" aria-hidden="true"></span>&nbsp;添加新行
					</button>
					<button type="button" class="btn btn-info">
						<span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>&nbsp;添加新组
					</button>
					<button type="button" class="btn btn-xs btn-danger">
						<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>&nbsp;删除组
					</button>
				</div>
			</div>
			<div class="querystmts">
				<div class="sin_con">
					<div class="sin_key">
						<select id="col" style="cursor:pointer"
							class="form-control selectpicker bs-select-hidden mobile-device"
							data-mobile="true">
							<optgroup label="user1">
								<option value="user1.id">编号</option>
								<option value="user1.name">姓名</option>
							</optgroup>
							<optgroup label="user2">
								<option value="user2.id">编号</option>
								<option value="user2.name">姓名</option>
							</optgroup>
						</select>
					</div>
					<div class="sin_connect">
						<select style="cursor:pointer"
							class="form-control selectpicker bs-select-hidden mobile-device"
							data-mobile="true">
							<option value="=">等于</option>
							<option value="!=">不等于</option>
							<option value="<">小于</option>
							<option value="<=">小于等于</option>
							<option value=">">大于</option>
							<option value=">=">大于等于</option>
							<option value="between">在..范围之内</option>
							<option value="not between">不在..范围之内</option>
							<option value="is null">为null</option>
							<option value="is not null">不为null</option>
						</select>
					</div>
					<div class="sin_val">
						<input class="form-control" placeholder="请输入名称" type="text">
					</div>
					<div class="sin_op">
						<img src="css/images/2.png" alt="Remove" class="remove" />
					</div>
				</div>
				<div class="sin_con">
					<div class="sin_key">
						<select style="cursor:pointer"
							class="form-control selectpicker bs-select-hidden mobile-device"
							data-mobile="true">
							<optgroup label="user1">
								<option value="user1.id">编号</option>
								<option value="user1.name">姓名</option>
							</optgroup>
							<optgroup label="user2">
								<option value="user2.id">编号</option>
								<option value="user2.name">姓名</option>
							</optgroup>
						</select>
					</div>
					<div class="sin_connect">
						<select style="cursor:pointer"
							class="form-control selectpicker bs-select-hidden mobile-device"
							data-mobile="true">
							<option value="=">等于</option>
							<option value="!=">不等于</option>
							<option value="<">小于</option>
							<option value="<=">小于等于</option>
							<option value=">">大于</option>
							<option value=">=">大于等于</option>
							<option value="between">在..范围之内</option>
							<option value="not between">不在..范围之内</option>
							<option value="is null">为null</option>
							<option value="is not null">不为null</option>
						</select>
					</div>
					<div class="sin_val">
						<span class="fir_span"><input class="form-control"
							placeholder="请输入最小值" type="text"></span> <span class="con_span">--</span>
						<span class="sec_span"><input class="form-control"
							placeholder="请输入最大值" type="text"></span>
					</div>
					<div class="sin_op">
						<img src="css/images/2.png" alt="Remove" class="remove" />
					</div>
				</div>
			</div>
			<!--<div class="op_add">-->
			<!--&lt;!&ndash;<img  class="add" style="cursor:pointer" src="css/images/add.gif" alt="添加新行">&ndash;&gt;-->
			<!--<span class="label label-primary">添加新行</span>-->
			<!--<span class="label label-success">新组</span>-->
			<!--</div>-->
			<div class="builder_main">
				<div class="l_op">
					<div class="btn-group btn-group-xs group_left"
						data-toggle="buttons">
						<label class="btn btn-primary active"> <input type="radio"
							name="options" autocomplete="off" value="and" checked>并且
						</label> <label class="btn btn-primary"> <input type="radio"
							name="options" value="or" autocomplete="off"> 或者 </label>
					</div>
					<div class="btn-group btn-group-xs group_right" role="group"
						aria-label="...">
						<button type="button" class="btn btn-primary">
							<span class="glyphicon glyphicon-align-justify"
								aria-hidden="true"></span>&nbsp;添加新行
						</button>
						<button type="button" class="btn btn-info">
							<span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>&nbsp;添加新组
						</button>
						<button type="button" class="btn btn-xs btn-danger">
							<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>&nbsp;删除组
						</button>
					</div>
				</div>
				<div class="querystmts">
					<div class="sin_con">
						<div class="sin_key">
							<select style="cursor:pointer"
								class="form-control selectpicker bs-select-hidden mobile-device"
								data-mobile="true" onchange="changeSelect(this)">
								<optgroup label="user1">
									<option value="user1.id">编号</option>
									<option value="user1.name">姓名</option>
								</optgroup>
								<optgroup label="user2">
									<option value="user2.id">编号</option>
									<option value="user2.name">姓名</option>
								</optgroup>
							</select>
						</div>
						<div class="sin_connect">
							<select style="cursor:pointer"
								class="form-control selectpicker bs-select-hidden mobile-device"
								data-mobile="true">
								<option value="=">等于</option>
								<option value="!=">不等于</option>
								<option value="<">小于</option>
								<option value="<=">小于等于</option>
								<option value=">">大于</option>
								<option value=">=">大于等于</option>
								<option value="between">在..范围之内</option>
								<option value="not between">不在..范围之内</option>
								<option value="is null">为null</option>
								<option value="is not null">不为null</option>
							</select>
						</div>
						<div class="sin_val"></div>
						<div class="sin_op">
							<img src="css/images/2.png" alt="Remove" class="remove head">
						</div>
					</div>
					<div class="sin_con">
						<div class="sin_key">
							<select style="cursor:pointer"
								class="form-control selectpicker bs-select-hidden mobile-device"
								data-mobile="true">
								<optgroup label="user1">
									<option value="user1.id">编号</option>
									<option value="user1.name">姓名</option>
								</optgroup>
								<optgroup label="user2">
									<option value="user2.id">编号</option>
									<option value="user2.name">姓名</option>
								</optgroup>
							</select>
						</div>
						<div class="sin_connect">
							<select style="cursor:pointer"
								class="form-control selectpicker bs-select-hidden mobile-device"
								data-mobile="true">
								<option value="=">等于</option>
								<option value="!=">不等于</option>
								<option value="<">小于</option>
								<option value="<=">小于等于</option>
								<option value=">">大于</option>
								<option value=">=">大于等于</option>
								<option value="between">在..范围之内</option>
								<option value="not between">不在..范围之内</option>
								<option value="is null">为null</option>
								<option value="is not null">不为null</option>
							</select>
						</div>
						<div class="sin_val">
							<input class="form-control" placeholder="请输入名称" type="text"
								style="ime-mode:disabled;">
						</div>
						<div class="sin_op">
							<img src="css/images/2.png" alt="Remove" class="remove">
						</div>
					</div>
				</div>
				<!--<div class="op_add">-->
				<!--&lt;!&ndash;<img  class="add" style="cursor:pointer" src="css/images/add.gif" alt="添加新行">&ndash;&gt;-->
				<!--<span class="label label-primary">添加新行</span>-->
				<!--<span class="label label-success">新组</span>-->
				<!--</div>-->
			</div>
			<button type="button" class="btn btn-primary btn-lg">获取SQL</button>

			<!--浮动的详细信息-->
			<div class="detail_info" id="box_detail"></div>
		</div>
		<!--footer-->
		<div class="jq_foot">
			<span class="mr30">版权所有 © 2016</span>QueryBuilder
		</div>
</body>
</html>
